<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--写一个子组件这里实现数量的增加和减少-->
    <h2>我是子组件,我现在的个数是{{num}}</h2>
    <heima :count="num" @inc="incream" @dow="down"></heima>
</div>

<script src="./node_modules/vue/dist/vue.js"></script>
<script>
    const heima = {
        template: `
    <div>
     <button @click="plus">点我增加数量</button>
     <button @click="reduce">点我减少数量</button>
</div>
    `,
        methods: {
            plus() {
                this.$emit("inc")
            },
            reduce() {
                this.$emit("dow")
            }
        }
    }
    let app = new Vue({
        el: "#app",
        data: {
            num: 0
        },
        methods: {
            incream() {
                this.num++
            },
            down() {
                this.num--
            }
        },
        components: {
            heima:heima
        }
    })
</script>
</body>
</html>